<template>
  <div class="container">
    <div class="top">
      <div class="title">{{title}}</div>
      <div class="more">更多></div>
    </div>
    <div class="list" @click="goSearch($event)">
      <template v-if="listData.length">
         <div  class="listItem" v-for="item in listData" :key="item.bid" :data-name="item.bName">
          <div class="cover">
            <img :src="item.bid | qdImg" alt="">
          </div>
          <div class="title">{{item.bName}}</div>
          <div class="cat">{{item.cat}}</div>
        </div>
      </template>
      <Skeleton v-else />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Skeleton from './skeleton.vue'
export default {
  name: 'BookList',
  props: ['actionName', 'title'],
  components: { Skeleton },
  computed: {
    ...mapState({
      listData (state){
        return state.novel[this.actionName].slice(0, 8)
      }
    })
  },
  mounted (){
    if (this.listData.length === 0){
      this.$store.dispatch(this.actionName)
    }
  },
  methods: {
    goSearch (e){
      let searchKey = ''
      for (let i = 0; i < e.path.length; i++){
        searchKey = e.path[i].dataset.name
        if (searchKey) break
      }
      this.$router.push({ name: 'Search', params:{ searchKey } })
    }
  },
  filters:{
    qdImg (bid){
      return 'https://bookcover.yuewen.com/qdbimg/349573/bid/300'.replace('bid', bid)
    }
  }

}
</script>

<style lang="less" scoped>
.container{
    margin: 1em 5%;
    border-radius: 10px;
    padding: 15px 8px ;
    min-height: 20em;
    background-color: var(--box-bg);
    .top{
      font-size: 1.5em;
      line-height: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        font-size: 1em;
      }
      .more{
        font-size: .6em;
      }
    }
    .list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .listItem{
        width: 22%;
        margin-bottom: 1.2em;
        .cover{
          border-radius: 5px;
          overflow: hidden;
          width: 100%;
          img{
            width: 100%;
          }
        }
        .title{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 1em;
          min-height: 3em;
          line-height: 1.5;
          color: var(--font-color);

        }
        .cat{
          font-size: .8em;
          line-height: 1.2;
          color: var(--font-active-color);
        }
      }
    }

  }
</style>
